
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>推荐获返佣</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
        <style>
            body{
                font-size: 14px;
            }
            .my-list{
                width: 80%;
                margin: 0 auto;
                margin-top: 50px;
            }
            .touxiang{
                width: 50px;
                border-radius: 50%;
                margin-right: 8px;
                float: left;
            }
            .name{
                margin-top:15px;
                display: block;
            }
            .qrcodeLi{
                text-align: center;
                background: #fbe8d1;
                position: relative;
                padding-top: 40px;
            }
            #qrcode img{
                margin: 0 auto;
                box-shadow:0 0 0 8px #fff;
            }
            .shareTitle{
                margin-top: 30px;
                display: block;
            }
            .myBtn{
                width: 30%;
                margin: 0 auto;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
            }
            .aui-list-view-cell:last-of-type{
                background: #efeff4;
            }
            .aui-list-view-cell:last-of-type:after{
                border: 0;
            }
            .share{
                background: #f5cb49;
            }
            .weixin{
                display: inline-block;
            }
            .weixin img{
                width: 80px;
            }
            .sharePicker{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(160px);
                height: 160px;
                overflow-y:auto; 
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 9999;
                text-align: center;
                width: 100%;
            }
            .sharePicker .aui-list-view{
                margin: 0;
            }
            .pickAnimate{
                -webkit-transform: translateY(00px);
            }   
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                推荐获返佣
            </div>
        </header>
        <div class="contain">
            <ul class="aui-list-view my-list ">
                <li class="aui-list-view-cell" >
                    <img class="touxiang" src="../../image/shili.jpg" >
                    <span class="name">平台账号：jcm0325</span>
                </li>
                <li class="aui-list-view-cell qrcodeLi" >
                    <div id="qrcode">
                    </div>
                    <span class="shareTitle">分享到朋友圈或好友，获取返佣</span>
                </li>
                <li class="aui-list-view-cell " >
                   <div class="myBtn" tapmode onclick="share()">分享</div>
                </li>
            </ul>
        </div>
        <!-- 弹出分享 -->
        <div class="sharePicker">
             <ul class="aui-list-view setOffer">
                 <li class="aui-list-view-cell" >
                     <div class="weixin" tapmode onclick="shareWeChat()">
                         <img src="../../image/weixin.png">
                         <p>分享到微信</p>
                     </div>
                     <div class="weixin">
                         <img src="../../image/QQ.png" tapmode onclick="shareQQ()">
                         <p>分享到QQ</p>
                     </div>
                 </li>
                 <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                     取消
                 </li>
             </ul>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript" src="../../script/qrcode.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
        }
        window.onload =function(){
            var qrcode = new QRCode(document.getElementById("qrcode"), { 
                width : 200,//设置宽高
                height : 200
            });

            var url="http://www.gzjinlanren.com/mobile/register.php?tj=";
            // var url="http://www.gzjinlanren.com/mobile/register.php?tj=18718341993";
                qrcode.makeCode(url);
        }
        // mui遮罩
        var mask = mui.createMask(hidePicker);

        // 关闭遮罩
        function hidePicker(){
            $(".sharePicker").removeClass("pickAnimate");
            mask.myclose();
        }
        //弹出分享
        function share(){
            mask.show();
            $(".sharePicker").addClass("pickAnimate");
        }
        //QQ分享
        function shareQQ(){
            var qq = api.require('QQPlus');
            qq.installed(function(retInstall, errInstall) {
                if (retInstall.status) {//已安装，就登陆
                    qq.login(function(retLogin, errLogin) {
                        if(retLogin.status){//登录成功
                            qq.shareNews({
                                url: 'http://sports.sina.com.cn/',
                                title: '新闻分享测试',
                                description: '新闻描述测试',
                                imgUrl: 'http://k.sinaimg.cn/n/sports/transform/20161125/bn4r-fxyawmm3366300.jpg/w570b3a.jpg'
                            },function(retShare,errShare){
                                if (retShare.status){
                                    alert("分享成功！");
                                } else {
                                    if(errShare.msg=="cancel"){
                                        api.toast({
                                            msg:"已取消分享"
                                        })
                                    }
                                }
                            });
                        }else{//登录失败
                            api.toast({
                                msg:"QQ登录失败"
                            })
                        }
                    })
                } else {
                    api.toast({
                        msg:"您还没没有安装QQ"
                    })
                }
            });

            hidePicker();
        }
        //微信分享
        function shareWeChat(){
            var wx = api.require('wx');
            wx.isInstalled(function(retInstall, errInstall) {
                if (retInstall.installed) {//已安装，就登陆
                    wx.shareWebpage({
                        apiKey: '',
                        scene: 'timeline',
                        title: '测试标题',
                        description: '分享内容的描述',
                        thumb: 'widget://a.jpg',
                        contentUrl: 'http://sports.sina.com.cn/'
                    }, function(ret, errShare) {
                        if (ret.status) {
                            api.toast({
                                msg:"分享成功"
                            })
                        } else {
                            var message;
                            switch(errShare.code){
                                case -1:
                                    message="未知错误";
                                    break;
                                case 1:
                                    message="未知错误";
                                    break;
                                case 2:
                                    message="您已取消分享";
                                    break;
                                case 3:
                                    message="分享失败，请稍后重试";
                                    break;
                                case 4:
                                    message="暂时还未授权，请联系管理员";
                                    break;
                                case 5:
                                    message="服务暂不支持";
                                    break;
                            }
                            api.toast({
                                msg:message
                            })
                        }
                    });
                } else {
                    api.toast({
                        msg:"您还没没有安装微信"
                    })
                }
            });
            hidePicker();
        }
    </script>
</html>
